<template>
  <div class="query-table">
    <!-- <div class="button-group">
      <slot name="tableButtons" />
    </div> -->
    <el-table
      ref="queryTable"
      :highlight-current-row="highlightCurrentRow"
      :header-cell-style="rowClass"
      :row-style="tableRowStyle"
      class="common-table"
      tooltip-effect="light"
      :data="tableData"
      :row-key="rowKey"
      :default-expand-all="expandAll"
      :tree-props="{ children: children, hasChildren: true }"
      :show-summary="showSummary"
      :max-height="maxHeight"
      @select="select"
      @select-all="selectAll"
      @sort-change="sortChange"
      @selection-change="selectionChange"
    >
      <el-table-column
        v-if="showSelection"
        type="selection"
        :reserve-selection="true"
        width="40"
      />
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        :index="indexMethod"
        align="center"
        width="50"
      />
      <el-table-column
        v-for="item in tableLabel"
        v-if="!item.hidden"
        :key="item[rowKey]"
        :align="item.align || 'center'"
        :prop="item.code"
        :label="item.label"
        :fixed="item.code === 'operateColumn'? 'right':item.fixed"
        :width="getColumnWidth(item)"
        :min-width="item.minWidth"
        :show-overflow-tooltip="item.code === 'operateColumn' ? false : !item.hiddenOverflowTooltip"
        v-bind="item"
        :sortable="item.sortable"
        :resizable="!!item.resizable"
      >
        <template slot-scope="scope">
          <template v-if="item.formatter">
            {{ item.formatter(scope.row[item.code], scope.row) || '-' }}
          </template>
          <template v-else-if="item.code === 'operateColumn'">
            <!-- :style="'width:' + item.width + 'px'" -->
            <div style="display: flex; justify-content: center; padding: 0 15px;">
              <slot name="operate" :row="scope.row" :index="scope.$index" />
            </div>
          </template>

          <template v-else-if="item.slotName">
            <slot
              :name="item.slotName"
              :value="scope.row[item.code]"
              :row="scope.row"
              :index="scope.$index"
            />
          </template>

          <template v-else>
            {{ scope.row[item.code] || '-' }}
          </template>
        </template>
      </el-table-column>
      <span slot="empty">
        <slot name="empty">暂无数据</slot>
      </span>
    </el-table>
    <div v-show="paginationShow" class="table-pagination">
      <el-pagination
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 15, 20]"
        :page-size="pageInfo.pageSize"
        :layout="layout"
        :total="pageInfo.totalSize"
        background
        popper-class="pop-mb-0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <el-button @click="jumpLastPage">尾页</el-button>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComTable',
  components: {},
  props: {
    // 是否展示分页
    paginationShow: {
      default: true,
      type: Boolean
    },
    // 行信息
    highlightCurrentRow: {
      default: false,
      type: Boolean
    },
    // 分页信息
    pageInfo: {
      type: Object,
      default() {
        return {
          pageNum: 1, // 当前页码
          pageSize: 10, // 分页数量
          totalSize: 0 // 数据总数
        }
      }
    },
    layout: {
      // total, sizes, prev, pager, next, jumper
      // default: 'prev, pager, next, slot, total, jumper',
      default: 'prev, pager, next, slot, sizes, total, jumper',
      type: String
    },
    // eslint-disable-next-line vue/require-default-prop
    maxHeight: [Number, String],
    showIndex: {
      type: Boolean,
      default: false
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    tableLabels: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    showSelection: {
      default: false,
      type: Boolean
    },
    expandAll: {
      default: false,
      type: Boolean
    },
    children: {
      default: 'children',
      type: String
    },
    rowKey: {
      default: 'id',
      type: String
    },
    align: {
      default: 'center',
      type: String
    }
  },
  data: function() {
    return {
      tableLabel: this.$props.tableLabels
    }
  },
  watch: {},
  methods: {
    indexMethod(index) {
      const { pageNum, pageSize } = this.pageInfo
      const preTotal = this.paginationShow ? (pageNum - 1) * pageSize : 0
      return index + preTotal + 1
    },
    resetTableCheck() {
      this.$refs.queryTable.clearSelection()
    },
    sortChange({ column, prop, order }) {
      this.$emit('sort-change', { column, prop, order })
    },
    clearSort() {
      this.$refs.queryTable.clearSort()
    },
    select(selection, row) {
      this.$emit('select', selection, row)
    },
    selectAll(selection) {
      this.$emit('selectAll', selection)
    },
    selectionChange(selection) {
      this.$emit('selectionChange', selection)
    },
    // 当前操作的数据是否处于某种状态
    // isActive(item, button, row) {
    //   if (!item.buttonSetting && !button.key) return ''
    //   const { field, getCurrentRow, getOperationType } = item.buttonSetting
    //   const currentRow = getCurrentRow()
    //   const operationType = getOperationType()
    //   return currentRow[field] === row[field] && button.key === operationType
    //     ? 'active'
    //     : ''
    // },
    // 获取行宽度
    getColumnWidth(item) {
      return item.code === 'operateColumn'
        ? String(+item.width + 30)
        : item.width || ''
    },
    // 每页数量变化
    handleSizeChange(pageSize) {
      this.$emit('pager-change', {
        pageNum: 1,
        pageSize
      })
    },
    // 翻页
    handleCurrentChange(pageNum) {
      this.$emit('pager-change', {
        pageNum,
        pageSize: this.pageInfo.pageSize
      })
    },
    // 设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      // return 'height: 62px;background: #Ffffff;border: 1px solid #E8E8E8;font-size: 16px;font-family: Source Han Sans CN;font-weight: 400;color: ##595959;'
    },
    // 设置表头行的样式
    rowClass() {
      return 'background: #f8f8f9; color: #333'
    },
    jumpLastPage() {
      const pageIndex = Math.ceil(
        this.pageInfo.totalSize / this.pageInfo.pageSize
      )
      this.handleCurrentChange(pageIndex)
    }
  }
}
</script>

<style scoped lang="scss">
.table-pagination {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

//.table-pagination {
//  background-color: #fff;
//  // padding: 10px 0;
//  margin: 30px 0 30px 0;
//  line-height: 38px;
//
//  ::v-deep .el-pagination {
//    padding: 0;
//    float: right;
//
//    .btn-next {
//      width: 38px;
//      height: 38px;
//    }
//  }
//
//  ::v-deep .el-select {
//    width: 100px;
//    margin: 0 5px;
//  }
//
//  ::v-deep .el-pagination .el-select .el-input {
//    width: 100px;
//    margin: 0;
//  }
//
//  ::v-deep .btnpage {
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: 400;
//    color: #595959;
//    margin: 0 10px;
//    background-color: #ffffff;
//    border: 1px solid #dfdfdf;
//
//    &:hover {
//      color: #595959;
//      border-color: #dfdfdf;
//      background-color: #e0eeed;
//    }
//
//    &:focus {
//      color: #ffffff !important;
//      background-color: #118a84;
//    }
//  }
//
//  ::v-deep .el-button {
//    width: 60px;
//    height: 38px;
//    background: #ffffff;
//    border: 1px solid #dfdfdf;
//    border-radius: 4px;
//    color: #595959;
//  }
//
//  ::v-deep .el-pagination button {
//    background-color: #ffffff !important;
//    border: 1px solid #dfdfdf;
//  }
//
//  ::v-deep .el-pagination button:hover {
//    color: #595959;
//    border: 1px solid #dfdfdf;
//    background-color: #e0eeed !important;
//  }
//
//  ::v-deep .el-pagination button:focus {
//    color: #ffffff;
//    background-color: #118a84 !important;
//  }
//
//  ::v-deep .el-pagination .btn-prev {
//    width: 38px;
//    height: 38px;
//  }
//
//  ::v-deep .el-pager li {
//    min-width: 38px;
//    height: 38px;
//    line-height: 38px;
//    background: #ffffff;
//    border: 1px solid #dfdfdf;
//    border-radius: 4px;
//  }
//
//  ::v-deep .el-pagination button,
//  .el-pagination span:not([class*="suffix"]) {
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: bold;
//    // color: #595959!important;
//  }
//
//  ::v-deep .el-pagination span:not([class*="suffix"]) {
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: 400;
//  }
//
//  ::v-deep .el-pagination .el-pagination__total {
//    margin-right: 10px !important;
//    margin-left: 10px !important;
//    height: 38px !important;
//    line-height: 38px !important;
//    vertical-align: middle;
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: bold;
//    color: #595959 !important;
//  }
//
//  ::v-deep .el-pagination__jump {
//    height: 38px !important;
//    line-height: 38px !important;
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: bold;
//    color: #595959 !important;
//  }
//
//  ::v-deep .el-pagination__editor {
//    margin: 0 10px;
//  }
//
//  ::v-deep .el-pagination__sizes .el-input .el-input__inner:hover {
//    border-color: #118a84 !important;
//  }
//
//  ::v-deep .el-select .el-input.is-focus .el-input__inner {
//    border-color: #118a84 !important;
//  }
//
//  ::v-deep .el-select .el-input__inner:focus {
//    border-color: #118a84 !important;
//  }
//
//  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled) {
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: 400;
//    border: 1px solid #d1d5d8;
//    background-color: #fff;
//    color: #595959;
//
//    &:hover {
//      color: #595959;
//      border-color: #dfdfdf;
//      background-color: #e0eeed;
//    }
//  }
//
//  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
//    font-size: 16px;
//    border: 1px solid #d1d5d8;
//    color: #ffffff;
//    background-color: #118a84;
//  }
//
//  ::v-deep .el-pagination {
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: bold;
//    text-align: right;
//
//    .el-pagination__total {
//      font-size: 16px;
//    }
//  }
//
//  ::v-deep .el-pagination__sizes {
//    margin-left: 0 !important;
//  }
//
//  ::v-deep .el-pagination__sizes .el-input .el-input__inner {
//    height: 38px;
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: bold;
//    color: #595959;
//  }
//
//  ::v-deep .el-pagination__editor.el-input .el-input__inner {
//    height: 38px;
//    font-size: 16px;
//    font-family: Source Han Sans CN;
//    font-weight: 400;
//    color: #595959;
//  }
//}
</style>

